<script setup>
import { useForm } from '@/hooks/common/form';
import { platformsOptions, authStatusOptions } from '@/constants/common'
defineOptions({ name: 'StoreSearch' })

const emit = defineEmits(['reset', 'search'])
const { formRef, validate, restoreValidation } = useForm();

const model = defineModel('model', { required: true })

const tagOptions = []
const statusOptions = []

async function reset(){
  await restoreValidation();
  emit('reset');
}

async function search(){
  await validate();
  emit('search')
}
</script>

<template>
  <ElCard class="card-wrapper">
    <ElForm ref="formRef" :model="model" label-position="right" :label-width="80">
      <ElRow :gutter="24">
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.store.id')" prop="ShopId">
            <ElInput v-model="model.ShopId" :placeholder="$t('page.store.form.id')" />
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.store.name')" prop="ShopName">
            <ElInput v-model="model.ShopName" :placeholder="$t('page.store.form.name')" />
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.store.platform')" prop="platform">
            <ElSelect v-model="model.platform" clearable :placeholder="$t('page.store.form.platform')">
              <ElOption
                v-for="(item, idx) in platformsOptions"
                :key="idx"
                :label="$t(item.label)"
                :value="item.value"
              ></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.store.tag')" prop="tag">
            <ElSelect v-model="model.tag" clearable :placeholder="$t('page.store.form.tag')">
              <ElOption
                v-for="(item, idx) in tagOptions"
                :key="idx"
                :label="item.label"
                :value="item.value"
              ></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.store.times')" prop="tag">
            <ElDatePicker
                v-model="model.times"
                type="daterange"
                :start-placeholder="$t('page.store.form.start')"
                :end-placeholder="$t('page.store.form.end')"
              ></ElDatePicker>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="6" :md="8" :sm="12">
          <ElFormItem :label="$t('page.store.status')" prop="AuthState">
            <ElSelect v-model="model.AuthState" clearable :placeholder="$t('page.store.form.status')">
              <ElOption
                v-for="(item, idx) in authStatusOptions"
                :key="idx"
                :label="$t(item.label)"
                :value="item.value"
              ></ElOption>
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :lg="12" :md="24" :sm="24">
          <ElSpace class="w-full justify-end" alignment="end">
            <ElButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </ElButton>
            <ElButton type="primary" plain @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </ElButton>
          </ElSpace>
        </ElCol>
      </ElRow>
    </ElForm>
  </ElCard>
</template>

<style lang="scss" scoped>

</style>